<script setup lang="tsx">
import { createApp, defineComponent, onMounted } from 'vue';
import { useMap } from '@/hooks/common/amap';
import { fetchVPNDetail } from '@/service/api';
import InfoWindowContent from './modules/info-window-content.vue';
import type { MarkerInfo } from './modules/types';
import QuantumNode from './modules/quantum-node.vue';

defineOptions({
  name: 'AMap'
});

const { id } = defineProps<{ id: TicketManageApi.VPNManage.VPN['id'] }>();

const { map, AMap, initMap, addMarker, addPolyline, closeInfoWindow } = useMap();

async function initPageMap() {
  const { data: info, error } = await fetchVPNDetail(id);
  if (error) return;

  const devicePosition1: MarkerInfo = {
    type: 'device',
    lat: 39.9042,
    lng: 116.4074,
    title: info.deviceList[0].deviceCity,
    detail: info.deviceList[0]
  };
  devicePosition1.content = createInfoWindow('设备信息', devicePosition1);

  const devicePosition2: MarkerInfo = {
    type: 'device',
    lat: 30.5728,
    lng: 104.0668,
    title: info.deviceList[1].deviceCity,
    detail: info.deviceList[1]
  };
  devicePosition2.content = createInfoWindow('设备信息', devicePosition2);

  const pointPosition1: MarkerInfo = {
    type: 'vpn',
    lat: 31.2304,
    lng: 121.4737,
    title: `${info.deviceList[0].deviceCity}量子节点`,
    detail: info.deviceList[0]
  };
  // pointPosition1.content = createInfoWindow('量子节点', pointPosition1);

  const pointPosition2: MarkerInfo = {
    type: 'vpn',
    lat: 31.8206,
    lng: 117.2272,
    title: `${info.deviceList[1].deviceCity}量子节点`,
    detail: info.deviceList[1]
  };
  // pointPosition2.content = createInfoWindow('量子节点', pointPosition2);

  const markers = [devicePosition1, devicePosition2, pointPosition1, pointPosition2];

  /** 添加点 */
  markers.forEach(item => {
    const icon = {
      device: new URL(`@/assets/images/amap/device.png`, import.meta.url).href,
      vpn: new URL(`@/assets/images/amap/vpn.png`, import.meta.url).href
    };
    addMarker({
      position: [item.lng, item.lat],
      title: item.title,
      content: item.content,
      icon: icon[item.type]
    });
  });

  /** 量子隧道连线 */
  const path0 = {
    path: [
      new AMap.value.LngLat(devicePosition1.lng, devicePosition1.lat),
      new AMap.value.LngLat(devicePosition2.lng, devicePosition2.lat)
    ],
    options: {
      strokeColor: '#36ad6a'
    }
  };
  /** 量子节点连线 */
  const path1 = {
    path: [
      new AMap.value.LngLat(pointPosition1.lng, pointPosition1.lat),
      new AMap.value.LngLat(devicePosition1.lng, devicePosition1.lat)
    ],
    options: {
      strokeColor: '#f0a020'
    }
  };
  /** 量子节点连线 */
  const path2 = {
    path: [
      new AMap.value.LngLat(pointPosition2.lng, pointPosition2.lat),
      new AMap.value.LngLat(devicePosition2.lng, devicePosition2.lat)
    ],
    options: {
      strokeColor: '#f0a020'
    }
  };
  const path = [path0, path1, path2];

  /** 添加线 */
  path.forEach(item => {
    addPolyline({
      path: item.path,
      ...item.options
    });
  });

  /** 设置地图自适应居中 */
  map.value.setFitView(null, true, [200, 200, 200, 200]);
  /** 添加放大缩小工具 */
  map.value.addControl(new AMap.value.ToolBar());
}

/** 创建信息窗体 */
function createInfoWindow(title: string, info: MarkerInfo) {
  const infoComponent = defineComponent({
    setup() {
      return () => (
        <InfoWindowContent
          title={title}
          onCloseInfoWindow={closeInfoWindow}
          v-slots={{
            content: () => <QuantumNode info={info} />
          }}
        ></InfoWindowContent>
      );
    }
  });
  return createApp(infoComponent).mount(document.createElement('div')).$el;
}

onMounted(async () => {
  await initMap();
  initPageMap();
});
</script>

<template>
  <div class="size-full">
    <div id="mapContainer" class="size-full"></div>
    <div class="absolute left-20px top-20px flex-col gap-y-4px rounded-4px bg-white px-16px py-10px opacity-75">
      <div class="w-full flex-center flex-1 justify-between">
        <span>加密流量：</span>
        <span class="flex-1 color-[#36ad6a]">------------</span>
      </div>
      <div class="w-full flex-center flex-1 justify-between">
        <span>量子密钥：</span>
        <span class="flex-1 color-[#f0a020]">------------</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.amap-icon img {
  width: 25px;
  height: 34px;
}
</style>
